<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="分类名称" prop="categoryName">
            <el-input
              v-model.trim="queryParams.categoryName"
              placeholder="请输入内容"
              class="filter-item limit"
              maxlength="30"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分类编码" prop="categoryKey">
            <el-input
              v-model.trim="queryParams.categoryKey"
              placeholder="请输入内容"
              class="filter-item limit"
              maxlength="30"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <div>
          <div class="flex-1" />
          <div style="display:flex;">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button
            v-permission="['CLASSIFYMAG_CLASSIFYMAG_ADD_BUTTON']"
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增</el-button>
          <div class="flex-1" />
          <dt-dialog-column v-model="isShowTable" :columns="showColumns" :table-ref="$refs.table" @queryTable="getList" />
        </div>
        <el-table
          v-if="isShowTable"
          ref="table"
          v-loading="loading"
          border
          :header-cell-style="{ backgroundColor: '#f2f2f2'}"
          highlight-current-row
          :data="classifyMagList"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="(index)=>(queryParams.pageNo - 1) * queryParams.pageSize + index + 1"
          />
          <el-table-column v-if="showColumns[0].show" key="categoryName" label="分类名称" show-overflow-tooltip align="center" prop="categoryName" />
          <el-table-column v-if="showColumns[1].show" key="categoryKey" label="分类编码" show-overflow-tooltip align="center" prop="categoryKey" />
          <el-table-column v-if="showColumns[2].show" key="sort" label="排序" show-overflow-tooltip align="center" prop="sort" />
          <el-table-column v-if="showColumns[3].show" key="description" label="描述" show-overflow-tooltip align="center" prop="description" />
          <el-table-column :key="Math.random()" label="操作" fixed="right" align="center" class-name="small-padding fixed-width" width="198">
            <template slot-scope="scope">
              <el-button
                v-permission="['CLASSIFYMAG_CLASSIFYMAG_UPDATE_BUTTON']"
                size="small"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                v-permission="['CLASSIFYMAG_CLASSIFYMAG_DEL_BUTTON']"
                size="small"
                icon="el-icon-delete"
                type="danger"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <dt-pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 添加或修改参数配置对话框 -->
    <dt-dialog :title="title" :visible.sync="open" @comfirmBtn="submitForm" @closeDialog="cancel">
      <div slot="content">
        <el-form ref="form" :model="form" :rules="rules" label-width="82px">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model.trim="form.categoryName" placeholder="请输入分类名称" maxlength="10" show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="分类编码" prop="categoryKey">
            <el-input v-model.trim="form.categoryKey" placeholder="请输入分类编码" maxlength="15" show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model.trim="form.sort" placeholder="请输入内容" maxlength="8" show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model.trim="form.description" type="textarea" maxlength="200" placeholder="请输入内容" show-word-limit class="limit" />
          </el-form-item>
        </el-form>
      </div>
    </dt-dialog>
  </div>
</template>

<script>
import { listclassifyMag, getclassifyMag, delclassifyMag, addclassifyMag, updateclassifyMag } from '@/framework/api/classifyMag/classifyMag'
import { uuId } from '@/framework/utils/uuid'
export default {
  name: 'ClassifyMag',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显隐表格
      isShowTable: true,
      // 列显隐数组
      showColumns: [
        { prop: 'categoryName', label: '分类名称', show: true },
        { prop: 'categoryKey', label: '分类编码', show: true },
        { prop: 'sort', label: '排序', show: true },
        { prop: 'description', label: '描述', show: true }
      ],
      showSearch: true,
      // 总条数
      total: 0,
      // 参数配置表格数据
      classifyMagList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        categoryKey: null,
        categoryName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        categoryName: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ],
        categoryKey: [
          { required: true, message: '分类编码不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (rule, value, callback) => {
            if (!this.validate.checkSort(value)) {
              callback(new Error('排序格式错误'))
            } else callback()
          }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询参数配置列表 */
    getList() {
      this.loading = true
      listclassifyMag(this.queryParams).then(({ data: response }) => {
        this.classifyMagList = response.rows
        this.total = response.totalRows
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        categoryId: null,
        categoryName: null,
        categoryKey: null,
        sort: null,
        description: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.form.categoryKey = uuId(8)
      this.open = true
      this.title = '添加分类信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      getclassifyMag(row.categoryId).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改分类信息'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.categoryId != null) {
            updateclassifyMag(this.form).then(response => {
              this.$dtModal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addclassifyMag(this.form).then(response => {
              this.$dtModal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$dtModal.confirm('是否确认删除分类名称为"' + row.categoryName + '"的数据项？').then(function() {
        return delclassifyMag(row.categoryId)
      }).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('删除成功')
      }).catch(() => {})
    }
  }
}
</script>
